<template>
    <div class="city-list wrapper">
        <div>
            <div class="data-cont">
                <h1>当前城市</h1>
                <ul>
                    <li  @click="handleCityClick(this.currentCity)">{{this.currentCity}}</li>
                </ul>
            </div>
            <div class="data-cont">
                <h1>热门城市</h1>
                <ul>
                    <li v-for="(item,index) of hotCities" :key="index" @click="handleCityClick(item.name)">{{item.name}}</li>
                </ul>
            </div>
            <div class="data-cont" v-for="(item,index) of cities" :key="index">
                <h1 :ref="index">{{index}}</h1>
                <ul class="city" v-for="(item,index) of item" :key="index">
                    <li @click="handleCityClick(item.name)">{{item.name}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    handleCityClick (city) {
      // this.$store.dispatch('changeCity', city)
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  },
  watch: {
    // 监听letter，当letter发生变化时触发
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.scroll = new BScroll('.wrapper', {click: true})
    }, 20)
  }
}
</script>
<style lang="stylus" scoped>
.city-list {
    position: absolute;
    top: 1.6rem;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.data-cont h1 {
    padding-left: 0.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #eee;
}

.data-cont ul {
    overflow: hidden;
}

.data-cont ul li {
    float: left;
    margin: 0.15rem;
    padding: 0.2rem;
    border-radius: 0.1rem;
    border: 1px solid #eee;
}

.data-cont ul.city li {
    float: none;
    display: block;
    padding: 0.1rem;
    border: none;
    border-bottom: 1px solid #eee;
}
</style>
